<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="./vue.js"></script>
</head>

<body>

  <div id="box">
    <button @click="handleClick()">click</button>

    <!-- 单分支 -->
    <template v-if="isCreated">
      <div>isCreated</div>
      <div>isCreated</div>
    </template>

    <!-- 双分支 -->
    <div v-if="isCreated">如果条件成立渲染劳资</div>
    <div v-else>否则渲染老娘</div>

    <!-- 多分支 -->
    <div v-if="which===1">键盘大餐</div>
    <div v-else-if="which===2">榴莲皮大餐</div>
    <div v-else>搓板大餐</div>



    <ul v-if="datalist.length">
      <li v-for="data in datalist">
        {{data}}
      </li>
    </ul>

    <div v-else>
      购物车空空如也
    </div>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: false,
        // datalist: ["法师兰黛","香奈儿","Diaosi"],
        datalist: [],
        which: 1
      },
      methods: {
        handleClick() {
          this.isCreated = !this.isCreated
          this.datalist = this.datalist.length ? [] : ["1111", "2222", "3333"]
        }
      },
    })
  </script>
</body>

</html>